<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Reactome Explorer</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/cytoscape/3.18.1/cytoscape.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="css/trace.css" />
</head>
<body>
    <div id="cy"></div>
    <div id="app">
        <div>
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1765810&auto=0&height=66"></iframe>
            <input id="starter-ID" v-model="id" type="text" placeholder="UBERON_0002079" class="block" />
            <!-- R-HSA-8963743 -->
            <input v-if="ptQuery.displayName" id="starter-species" type="text" class="block" />
            <input type="button" onclick="initGame()" value="开始">
            <input type="button" onclick="app.id = $('#starter-ID').attr('placeholder')" value="重来">
            <a v-if="ptQuery.displayName" v-bind:href="`https://reactome.org/content/detail/${id}`" target="_blank"><input type="button" value="官网链接" /></a>
            <a v-if="ptQuery.displayName" v-bind:href="`https://reactome.org/ContentService/data/query/${id}`" target="_blank"><input type="button" value="Query API" /></a>
            <a v-if="ptQuery.displayName" v-bind:href="`https://reactome.org/ContentService/data/entity/${id}/componentOf`" target="_blank"><input type="button" value="Entity Component API" /></a>
            <a v-bind:href="`https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/${id}`" target="_blank"><input type="button" value="官网链接" /></a>
            <a v-bind:href="`https://www.ebi.ac.uk/ols/api/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/${id}`" target="_blank"><input type="button" value="Uberon Query" /></a>
            <a v-bind:href="`https://www.ebi.ac.uk/ols/api/ontologies/uberon/terms/http%253A%252F%252Fpurl.obolibrary.org%252Fobo%252F${id}/graph`" target="_blank"><input type="button" value="Uberon Graph" /></a>
        </div>
        <div class="status">
            <p v-if="ptQuery.compartment">Position: <span>{{ptQuery.compartment[0].displayName}}</span></p>
            <p v-if="ptQuery.displayName">Identity: <span class="status-identity">{{ptQuery.displayName}}</span> ({{ptQuery.className}})</p>
            <p v-if="uberonQuery._embedded">Anatomy: <span>{{uberonQuery._embedded.terms[0].label}}</span> ({{uberonQuery._embedded.terms[0].iri.replace('http://purl.obolibrary.org/obo/', '')}})</p>
            <p v-if="uberonQuery._embedded"><img :src="illustrate" style="width: 100%;" /></p>
            <p>You have below choices:</p>
            <ul>
                <li v-for="evt in ptQuery.hasEvent" @click="updateID(evt.stId)">
                    <div>Participate in the subprocess: {{evt.displayName}}</div>
                </li>
                <li v-for="tab in ptEntity" v-if="tab.type == 'input'">
                    <div>Participate in the process:
                        <ul>
                            <li v-for="(id, index) in tab.stIds" v-if="matchSpecs(tab, index)" @click="updateID(id)">
                                {{tab.names[index]}} ({{tab.species[index]}})
                            </li>
                        </ul>
                    </div>
                </li>
                <li v-for="output in ptQuery.output" @click="updateID(output.stId)">
                    <div>Become the product: {{output.displayName}}</div>
                </li>
                <li v-if="uberonContinuousWithQuery._embedded" @click="updateID(uberonContinuousWithQuery._embedded.terms[0].iri.replace('http://purl.obolibrary.org/obo/', ''))">
                    Go to {{uberonContinuousWithQuery._embedded.terms[0].label}}
                </li>
                <li v-for="(edge, index) in uberonGraph.edges" v-if="matchUberonSpecs(edge)" @click="updateID(
                    (function () {
                        return edge.source == uberonQuery._embedded.terms[0].iri ? edge.target: edge.source
                    })().replace('http://purl.obolibrary.org/obo/', '')
                )">
                    Go to {{
                        uberonGraph.nodes.filter(function(node) {
                            return node.iri == (function() {
                                return edge.source == uberonQuery._embedded.terms[0].iri ? edge.target: edge.source
                            })()
                        })[0].label
                    }}
                </li>
            </ul>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>
